<template>
	<view class="user">
		<view class="head bg-yellow text-center text-white">
			<image src="@/imgs/nv.png"></image><br/>
			人名
		</view>
		<view class="mess bg-white">
			<view class="mess_01">
				<view class="text-red">
					<span>897</span>份
				</view>
				<view class="text-grey text-sm">总计送餐</view>
			</view>
			<view class="mess_01">
				<view class="text-red">
					<span>897</span>份
				</view>
				<view class="text-grey text-sm">总计送餐</view>
			</view>
			<view class="mess_01">
				<view class="text-red">
					<span>897</span>份
				</view>
				<view class="text-grey text-sm">总计送餐</view>
			</view>
		</view>
		<view class="mess bg-white margin-bottom-sm">
			<view class="mess_01">
				<view class="">
					<span>897</span>份
				</view>
				<view class="text-grey text-sm">总计送餐</view>
			</view>
			<view class="mess_01">
				<view class="">
					<span>897</span>份
				</view>
				<view class="text-grey text-sm">总计送餐</view>
			</view>
			<view class="mess_01">
				<view class="">
					<span>897</span>份
				</view>
				<view class="text-grey text-sm">总计送餐</view>
			</view>
		</view>
		<view class="shang bg-white">
			打赏骑手<span class="text-gery text-sm">（此费用将全部转给骑手）</span>
		</view>
		<view class="packer bg-white">
			<block v-for="(item,index) of list">
				<view class="pac bg-gray text-bold">
					<img src="@/imgs/red.png"></img>
					<br/>¥1.0
				</view>
			</block>
		</view>
		<view class="bg-white ptcg padding-sm">
			<view class="ptcg_l">已有13份打赏</view>
			<view class="ptcg_r">
				<block v-for="(item,index) of [1,2,3,4]">
					<view class="ptcg_img" :style="'right:'+ 25*index +'px'">
						<img class="img" src="@/imgs/nv.png"></img>
					</view> 
				</block>
			</view>
			<view class="ptcg_m">
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<view class="shang bg-white margin-top-sm">
			打赏骑手
		</view>
		<view class="btn bg-white">
			<button class="cu-btn bg-gray text-grey round margin-bottom margin-left" >5分（162人）</button>
			<button class="cu-btn bg-gray text-grey round margin-bottom margin-left" >4分（162人）</button>
			<button class="cu-btn bg-gray text-grey round" >3分（2人）</button>
			<button class="cu-btn bg-gray text-grey round" >2分（2人）</button>
			<button class="cu-btn bg-gray text-grey round" >1分（0人）</button>
		</view>
		<!-- #ifdef H5 -->
		<button v-jump="1" @click="jump">跳转骑手端</button>
		<!-- #endif -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				list:[1,2,3,4]
			};
		},
		methods:{
			jump(){
				uni.navigateTo({
					url:'../../horseman/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
.user{
	.head{padding: 25px;font-size: 16px;
		image{width: 65px;height: 65px;border-radius: 50%;}
	}
	.mess{display: flex;border-bottom: 1px solid #F7F7F7;
		.mess_01{width: 50%;text-align: center;padding: 15px 0;
			span{font-size: 18px;}
		}
	}
	.shang{font-size: 16px;font-weight: 600;border-bottom: 1px solid #F7F7F7;padding:12px 10px;
		span{font-weight: 100;}
	}
	.packer{display: flex;justify-content: space-around;border-bottom: 1px solid #F7F7F7;padding:12px 10px;
		.pac{width: 22%;background-color: #FAFAFA;text-align: center;padding: 5px 0;
			img{width: 60px;height: 60px;}
		}
	}
	.tou{display: flex;justify-content: space-between;}
	.ptcg{display: flex;padding:10px 10px;color:#909399;font-size:12px;line-height: 30px;
	
		.ptcg_l{font-size: 14px;}
		.ptcg_r{display: flex;line-height: 30px;position: relative;flex-grow: 1;text-align: right;
			.ptcg_img{z-index: 99;position: absolute;top:0;
				.img{width: 30px;height: 30px;border-radius: 50%;}
			} 
		}
	}
	.btn{padding: 25px 15px;display: flex;justify-content: space-around; flex-wrap: wrap;}
}
</style>
